<template>
	<view v-show="!isLoading" class="container">
		<!-- 商品图片轮播 -->
		<SlideImage v-if="!isLoading" :video="goods.goods_video" :videoCover="goods.goods_image"
			:images="goodsImages[0]" />

		<!-- 商品信息 -->
		<view v-if="!isLoading" class="goods-info m-top20">
			<!-- 价格、销量 -->
			<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
				<view class="block-left dis-flex flex-y-center">
					<!-- 商品售价 -->
					<text class="floor-price__samll">￥</text>
					<text class="floor-price">{{ goods.goods_price }}</text>
					<!-- 会员价标签 -->
					<view v-if="goods.is_user_grade" class="user-grade">
						<text>会员价</text>
					</view>
					<!-- 划线价 -->
					<text v-if="goods.market_price > 0" class="original-price">￥{{ goods.market_price }}</text>
				</view>
				<view class="block-right dis-flex">
					<!-- 销量 -->
					<view class="goods-sales">
						<text>已售{{ goods.sale_num }}件</text>
					</view>
				</view>
			</view>
			<!-- 标题、分享 -->
			<view class="info-item info-item__name dis-flex flex-y-center">
				<view class="goods-name flex-box">
					<text class="twoline-hide">{{ goods.goods_name }}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="goods-share__line"></view>
				<view class="goods-share">
					<button class="share-btn dis-flex flex-dir-column" open-type="share">
						<text class="share__icon iconfont icon-fenxiang"></text>
						<text class="f-24">分享</text>
					</button>
				</view>
				<!-- #endif -->
			</view>
			<!-- 商品卖点 -->
			<view v-if="goods.goods_subname" class="info-item info-item_selling-point">
				<text>{{ goods.goods_subname }}</text>
			</view>
		</view>

		<!-- 选择商品规格 -->
		<view v-if="goods.sku_open == 1" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
			<view class="spec-list">
				<view class="flex-box">
					<text class="col-8">规格：</text>
					<text class="spec-name" v-for="(item, index) in goods.spec_list"
						:key="index">{{ item.attr_name }}</text>
				</view>
				<view class="f-26 col-9 t-r">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>

		<!-- 商品服务 -->
		<Service v-if="!isLoading" :contractList="goods.contract_list" />

		<!-- 商品SKU弹窗 -->
		<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />

		<!-- 商品评价 -->
		<!-- <Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" /> -->

		<u-cell-group :border="false" customStyle="background:#fff;margin-top:20rpx;">
			<u-cell value="" isLink>
				<view slot="title" class="u-slot-pickup">
					<text class="u-cell-text">送至</text>
					<view class="map">
						<u-icon name="map" color="#666"></u-icon>
						<text style="color: #666;">请选择收货地址</text>
					</view>
				</view>
				<text slot="label" class="u-slot-freight">
					包邮
				</text>
			</u-cell>

			<u-cell value="" isLink :border="false">
				<view slot="title" class="u-slot-pickup">
					<text class="u-cell-text">自提点</text>
					<view class="map">
						<u-icon name="map" color="#666"></u-icon>
						<text style="color: #666;">上门自提</text>
					</view>
				</view>
			</u-cell>

		</u-cell-group>
		<!-- 店铺信息 -->
		<ShopInfo :shopInfo="shopInfo" :shopGoodsCount="shopGoodsCount" :shop_collect_count="shop_collect_count">
		</ShopInfo>


		<!-- 商品描述 -->
		<view v-if="!isLoading" class="goods-content m-top20">
			<view class="item-title b-f">
				<text>商品描述</text>
			</view>
			<block v-if="desc != ''">
				<view class="goods-content__detail b-f">
					<mp-html :content="desc" />
				</view>
			</block>
			<empty v-else tips="亲，暂无商品描述" />
		</view>

		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<!-- 导航图标 -->
				<view class="foo-item-fast">
					<!-- 店铺 -->
					<view class="fast-item " @click="onTargetShop">
						<view class="fast-icon">
								<u-icon name="home" :bold="true" size="20px" color="color[u-main-color]"></u-icon>
								<!-- <u-icon name="shouye" custom-prefix="custom-icon" :bold="true" size="20px" color="color[u-main-color]"></u-icon> -->
							<!-- <text class="iconfont icon-shouye"></text> -->
						</view>
						<view class="fast-text">
							<text>店铺</text>
						</view>
					</view>
					<!-- 客服 (仅微信小程序端显示) -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn-normal" open-type="contact">
						<view class="fast-item">
							<view class="fast-icon">
								<u-icon name="kefu-ermai" :bold="true" size="20px" color="color[u-main-color]"></u-icon>
								<!-- <text class="iconfont icon-kefu1"></text> -->
							</view>
							<view class="fast-text">
								<text>客服</text>
							</view>
						</view>
					</button>
					<!-- #endif -->
					<!-- 购物车 (非微信小程序端显示) -->
					<!-- #ifndef MP-WEIXIN -->
					<button class="btn-normal">
						<view class="fast-item">
							<view class="fast-icon">
								<u-icon name="star" :bold="true" size="20px" color="color[u-main-color]"></u-icon>
							</view>
							<view class="fast-text">
								<text>收藏</text>
							</view>
						</view>
					</button>

					<view class="fast-item fast-item--cart" @click="onTargetCart">
						<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">
							{{ cartTotal > 99 ? '99+' : cartTotal }}
						</view>
						<view class="fast-icon">
							<u-icon name="shopping-cart" :bold="true" size="20px" color="color[u-main-color]"></u-icon>
							<!-- <text class="iconfont icon-gouwuche"></text> -->
						</view>
						<view class="fast-text">
							<text>购物车</text>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-btn">
					<view class="btn-wrapper">
						<view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
							<text>加入购物车</text>
						</view>
						<view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
							<text>立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 快捷导航 -->
		<!-- <shortcut bottom="120rpx" /> -->

	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	// import * as CartApi from '@/api/cart'
	// import Shortcut from '@/components/shortcut'
	import SlideImage from './components/SlideImage'
	import SkuPopup from './components/SkuPopup'
	import Comment from './components/Comment'
	import Service from './components/Service'
	import ShopInfo from './components/ShopInfo'

	export default {
		components: {
			// Shortcut,
			SlideImage,
			SkuPopup,
			Comment,
			Service,
			ShopInfo
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 当前商品ID
				goodsId: null,
				// 商品详情
				goods: {},
				shopInfo: {},
				shopGoodsCount: 0,
				shop_collect_count: 0,
				sku: {},
				desc: {},
				// 商品图片
				goodsImages: [],

				// 购物车总数量
				cartTotal: 0,
				// 显示/隐藏SKU弹窗
				showSkuPopup: false,
				// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
				skuMode: 1
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 记录商品ID
			this.goodsId = parseInt(options.goodsId)
			// 加载页面数据
			this.onRefreshPage()
		},

		methods: {
			// 刷新页面数据
			onRefreshPage() {
				const app = this
				app.isLoading = true
				Promise.all([app.getGoodsDetail(), app.getCartTotal()])
					.finally(() => app.isLoading = false)
			},

			// 获取商品信息
			getGoodsDetail() {
				const app = this
				return new Promise((resolve, reject) => {
					GoodsApi.detail(app.goodsId)
						.then(result => {
							app.goods = result.data.goods
							app.sku = result.data.sku
							app.shopInfo = result.data.shop_info
							app.shopGoodsCount = result.data.shop_goods_count
							app.shop_collect_count = result.data.shop_collect_count
							let goodsImages = result.data.goods.goods_images;
							// 商品图片处理
							for (var key in goodsImages) {
								app.goodsImages.push(goodsImages[key])
							}

							resolve(result)

							this.getDesc()

							// 设置页面标题
							uni.setNavigationBarTitle({
								title: app.goods.goods_name
							});

						})
						.catch(reject)
				})
			},

			getDesc() {
				const app = this
				return new Promise((resolve, reject) => {
					GoodsApi.desc(app.goods.sku_id)
						.then(result => {
							app.desc = result.pc_desc
							resolve(result)
						})
						.catch(reject)
				})
			},

			// 获取购物车总数量
			getCartTotal() {
				const app = this
				// return new Promise((resolve, reject) => {
				//   CartApi.total()
				//     .then(result => {
				//       app.cartTotal = result.data.cartTotal
				//       resolve(result)
				//     })
				//     .catch(reject)
				// })
			},

			// 更新购物车数量
			onAddCart(total) {
				this.cartTotal = total
			},

			/**
			 * 显示/隐藏SKU弹窗
			 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			 */
			onShowSkuPopup(skuMode = 1) {
				this.skuMode = skuMode
				this.showSkuPopup = !this.showSkuPopup
			},

			// 跳转到店铺
			onTargetShop(e) {
				this.$navTo('pages/index/index')
			},

			// 跳转到购物车页
			onTargetCart() {
				this.$navTo('pages/cart/index')
			},

		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			})
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			})
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`
			}
		}
	}
</script>

<style>
	page {
		background: #fafafa;
	}
</style>
<style lang="scss" scoped>
	@import "./detail.scss";
</style>
